<template>
    <body id="paper">
    <div class="login_container">
        <!--        登录模块-->
        <div class="login_box">
            <!--            头像-->
            <div class="avatar_box">
<!--                <img src="../assets/logo.png" alt/>-->
                <img src="https://pica.zhimg.com/v2-c14e5277dec318d97fb0cfcebb799d91_r.jpg?source=1940ef5c" alt/>
            </div>
            <!--            表单-->
            <el-form  :rules="loginRules" ref="loginFormRef" :model="loginForm" class="login_form" label-width="0">
               <div v-if="!forgetPwd">                <!--               用户名-->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username"  prefix-icon="iconfont icon-denglu"></el-input>
                </el-form-item>
                <!--               密码-->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password"  prefix-icon="iconfont icon-mima" type="password"></el-input>
                </el-form-item>
                <!--            按钮-->
                <el-form-item class="btn">
                    <el-button type="primary" :loading="load" @click="login" >登录</el-button>
                    <el-button type="danger" size="small" @click="forget">忘记密码</el-button>
                </el-form-item>
               </div>
                <div v-else>
                    <el-row>
                    <el-form-item style="width: 100%" label="邮箱" prop="email">
                        <el-input v-model="loginForm.email" placeholder="请输入邮箱来找回密码"/>
                    </el-form-item>
                    </el-row>
                    <el-button type="primary" @click="findPwd"  :loading="load" style="width: 100%">找回密码</el-button>


                </div>




            </el-form>


        </div>

    </div>
    </body>
</template>

<script>
    import store from "../store/index"
    export default {
        name: "Login",
        data() {
            return {
                load:false,
                loadTest:'登录',
                //表单数据
                loginForm: {
                    username: "admin",
                    password: "123456",
                    email:''
                },
                //表单验证
                loginRules:{
                    username: [
                        {  required:true,message:'请输入用户名称',trigger:'blur'},//必填项验证
                        { min:3,max:12,message: '长度在3-12个字符',trigger: 'blur'}//长度验证
                    ],
                    password: [
                        {  required:true,message:'请输入用户密码',trigger:'blur'},//必填项验证
                        { min:6,max:10,message: '长度在6-10个字符',trigger: 'blur'}//长度验证
                    ],
                    email:[
                        {required:true,message:'请输入邮箱',trigger:'blur'},
                        {type:'email',message:'请输入正确的邮箱地址',trigger: ['blur','change']}
                    ]

                },
            //    登录状态
                load:false,
            //    忘记密码
                forgetPwd:false
            }
        },
        methods:{
            //    重置表单内容
            resetLoginForm(){
                this.$refs.loginFormRef.resetFields()
            },
            login(){
                this.$refs.loginFormRef.validate( valid=>{
                    //验证失败直接返回
                    if(!valid)return;
                    //验证成功
                    else{
                        // const {data:res}= this.$http.post("/test")
                        this.$http.post("/user/login",this.loginForm).then(res=>{
                            this.load=true
                            this.loginText='登陆者'

                            if(res!=null){

                                const tokenBody=res.data.data;
                                let tokenHead=tokenBody.tokenHead;
                                let token=tokenBody.token
                                console.log('----->tokenHead'+tokenHead)
                                console.log('----->token'+token)
                                this.$store.commit('setToken',tokenHead+token);

                                this.$router.push('/')
                                this.$message.success('登录成功');
                                console.log(res)

                            }else{

                            }


                        })

                    }
                })
            },
            //忘记密码
            forget(){
                    this.forgetPwd=true
            },
            //找回密码
            findPwd(){
                this.$refs.loginFormRef.validate(valid=>{
                    console.log('valid',valid)
                    if(!valid)return this.$message.error("数据校验失败，请检查后提交");
                })


            //    如果数据检验成功，则向后端发送请求，请求修改密码
                this.$http.post("/tool/forget/password",{receivers:[this.loginForm.email]}).then(res=>{
                    console.log(res)
                    if(res.data.flag){
                        this.$message.success(res.data.message);
                        this.forgetPwd=false
                    }
                })
            }
        }

    }

</script>

<style  scoped>

    .login_container{
        /*background-color: #2b4b6b;*/


        background:url("C:/Users/鱼尾/Desktop/sport/vue-sport/src/assets/走进新生活.jpg") no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: fixed;
        height: 100%;
    }
    .login_box{
        width:450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);


    }
    .avatar_box{
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius:50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #0ee;


    }
    img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }
    .btn{
        display: flex;
        justify-content: flex-end;
    }
    .login_form{
        position: absolute;
        bottom: 0%;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
</style>
